<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5、ECMAScript基础(深入)之浅克隆&深克隆</title>
</head>
<body>
    <script>
        var a = 5;
        a > 0 ?
            console.log('大于0') : 
            console.log('小于等于0');
        
        console.log('------分隔符-----');

        // 考点：字符串比较 => ASCII码比较
        var str = 89 > 9 ? ('89' > '9' ? '通过了' : '内层未通过') : '外层未通过';
        
        var a = b = {};

        // 浅克隆
        // var person1 = {
        //     name: '张三',
        //     age: 18
        // }
        // var person2 = {}
        // for(var key in person1){
        //     person2[key] = person1[key]
        // }
        // console.log(person1, person2);

        // console.log('------分隔符-----');

        // 浅克隆
        // 并没有处理对象里的引用值
        Object.prototype.num = 1;
        var person1 = {
            name: '张三',
            age: 28,
            son: {
                first: 'Jenney',
                second: 'Lucy'
            }
        }
        var person2 = {}
        for(var key in person1){
            person2[key] = person1[key]
        }

        person2.son.third = 'Ben';

        console.log(person1, person2);

        console.log('------分隔符-----');

        // 浅克隆
        function clone(origin, target){
            var target = target || {};
            for(var key in origin){
                if(origin.hasOwnProperty(key)){
                    target[key] = origin[key];
                }
            }
            return target;
        }

        var p1 = {
            name: '张三',
            age: 28,
            son: {
                first: 'Jenney',
                second: 'Lucy'
            }
        }
        var p2 = {}

        // clone(p1, p2);
        deepClone(p1, p2);
        p2.son.third = 'Ben';
        console.log(p1, p2);

        // 深克隆(方法1)
        function deepClone(origin, target){
            var toStr = Object.prototype.toString,
                arrType = '[object Array]';
            if(toStr.call(origin) == arrType) {
                var target = target || []; 
            } else {
                var target = target || {};
            }
            for(var key in origin){
                if(origin.hasOwnProperty(key)){
                    // null => Object
                    if(origin[key] !== null && typeof(origin[key]) === 'object'){
                        if(toStr.call(origin[key]) === arrType){
                            target[key] = [];
                        } else{
                            target[key] = {};
                        }
                        deepClone(origin[key], target[key]);
                    }else{
                        target[key] = origin[key];
                    }
                }
            }
            return target;
        }

        // 深克隆(方法2)
        // var str = JSON.stringify(origin);
        // var target = JSON.parse(str);

        // 深克隆(方法3)
        // JQuery

        var oA = [1, 2, 3, 4]
        var nA = dpclone(oA, [])
        nA.push(5);
        console.log(oA, nA);

        // 深克隆
        function dpclone(origin, target){
            var toStr = Object.prototype.toString,
                arrType = '[object Array]';
            if(origin){
                if(toStr.call(origin) == arrType) {
                    var target = target || []
                } else {
                    var target = target || {}
                }
            }
            for(var key in origin){
                if(origin.hasOwnProperty(key)){
                    if(origin[key] != null && typeof(origin[key]) == 'object'){
                        if(toStr.call(origin[key]) == arrType){
                            target[key] = [];
                        } {
                            target[key] = {};
                        }
                        dpclone(origin[key], target[key])
                    } else {
                        target[key] = origin[key];
                    }
                }
            }
            return target;
        }
    </script>
</body>
</html>